<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from "vue";
import CustomTabs from "@/components/Tabs/index.vue";
import { type OptionsType } from "@/components/ReSegmented";
import { useUpdateDomHeight, useCancelUpdateDomHeight } from "@/hooks/useCommon";

const props = defineProps({
  options: {
    type: Array as PropType<Array<OptionsType>>,
    default: () => []
  },
  gap: {
    type: Number,
    default: 32
  },
  defaultHeight: {
    type: Number,
    default: 708
  }
});

const switchTabsContentRef = ref(null);
const switchTabsContentHeight = ref<number>(props.defaultHeight);
const activeName = defineModel({ type: String, default: "" });

const activeCom = computed(() => props.options.find(item => item.name === activeName.value)?.com);

const comProps = computed(() => props.options.find(item => item.name === activeName.value)?.props);

const switchTabsChangeHandler = async () => await useUpdateDomHeight(switchTabsContentHeight, switchTabsContentRef, props.gap, props.defaultHeight);

const tabSelectHandler = async (selectName: string) => {
  activeName.value = selectName;
  await switchTabsChangeHandler();
};
onMounted(async () => {
  await switchTabsChangeHandler();
});

onUnmounted(() => useCancelUpdateDomHeight());
</script>

<template>
  <div class="switchTabs-overview">
    <div v-if="options.length > 1" class="tabs">
      <CustomTabs :tabList="options" :activeName="activeName" @tabSelect="tabSelectHandler" />
      <div class="tabs-slot"><slot /></div>
    </div>
    <div ref="switchTabsContentRef" class="content">
      <px-scrollbar :height="switchTabsContentHeight">
        <transition name="fab-tabs-fade" mode="out-in">
          <component :is="activeCom" :key="activeName" v-bind="comProps" :height="`${switchTabsContentHeight}px`" />
        </transition>
      </px-scrollbar>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.switchTabs-overview {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 16px;
  padding-top: 8px;
  background-color: #fff;

  .tabs {
    display: flex;
    gap: 16px;
    align-items: center;
  }

  .content {
    box-sizing: border-box;
    flex: 1;

    .px-scrollbar {
      :deep(.px-scrollbar__view) {
        height: 100%;
      }

      .fab-tabs-fade-enter-active,
      .fab-tabs-fade-leave-active {
        transition: all 0.4s ease;
      }

      .fab-tabs-fade-enter-from {
        opacity: 0;
        transform: translateX(-80px);
      }

      .fab-tabs-fade-leave-to {
        opacity: 0;
        transform: translateX(80px);
      }
    }
  }
}
</style>
